<template>
  <div class="ap-wrap" v-loading = "loading">
    <div class="gs-nav">我要卖货 > 热销商品 > 商品活动</div>
    <div class="ap-box">
      <template v-if="list.length">
        <activePromoteltem  v-for="(item, index) in list" :key="index":index="index" :item="item" />
      </template>
      <div class="no-wrap" v-else>暂无选品</div>
    </div>
    <div class="pagination"  v-show = "total > 0">
      <el-pagination
        background
        :current-page = "pageNum"
        @current-change="changeCurrentPage"
        :page-sizes="[8,16,24]"
        @size-change="changeCurrentPageSize"
        :total = "total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <div class="pageSearch" @click="pageSearch">确定</div>
    </div>
  </div>
</template>
<script>
import activePromoteltem from '~/components/activePromoteltem.vue'
export default {
  async fetch({store}) {
    await store.commit('setPromoteIndex', 0)
    await store.commit('setPromoteTwoIndex', 1)
  },
  layout: 'internalouts',
  components: {
    activePromoteltem
  },
  data() {
    return {
      list: [],
      pageNum:1, //第一页
			pageSize:8, //每页的条数
      total:0, //总条数
      loading:false, //页面加载效果
    }
  },
  methods:{
    changeCurrentPage(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
      this.activityList(); //调用活动列表接口
      this.$scrollTo();
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
      this.activityList();//调用活动列表接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.activityList();//调用活动列表接口
      this.$scrollTo();
		},
    activityList(){ //活动列表
      this.loading = true;
      let params ={
        pageNum:this.pageNum, //页数
        pageSize:this.pageSize, //每页的条数
      }
      this.$axios.$post('activityList',params).then(res => {
        this.loading = false;
        if(res.status === 200){
          this.list = res.obj.list;
          this.total = res.obj.total;
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    }
  },
  mounted(){
    this.activityList() //调用活动列表的数据
  }
}
</script>

<style scoped>
  .gs-nav {
    font-size: 14px;
    color: #999;
    height: 50px;
    line-height: 50px;
  }
  .ap-box {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin:0 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
  /* 暂无数据的css样式 */
  .no-wrap{
    width:100%;
    height:40px;
    line-height:40px;
    text-align:center;
    background:#ffffff;
    font-weight:bold;
    letter-spacing:2px;
    color:#666666;
    font-size:18px;
    border-radius:4px;
    box-shadow:0 0 6px #c2c2c2;
    margin:0 0 20px 0;
  }
</style>
